<template>
    <div>
        <el-card>
            <template #header>
                <div class='card-header'>
                    <span>委托详情 - {{samplesDetails.state}}</span>
                    <el-button type='primary' @click='get' v-if='samplesDetails.state == "待取样"' v-action='"check_jy"'>接样</el-button>
                </div>
            </template>

            <!--        基本部分信息-->
            <QrCode :value='samplesDetails.id' :size='84'/>
            <el-divider content-position='left'>委托单内容</el-divider>
            <v-form-render ref='vFormRef' :form-data='formData.list' :form-json='formJson' :option-data='optionData' class='v' />
        </el-card>
    </div>
</template>

<script lang='ts'>
import QrCode from '/@/components/QrCode/index.vue'
import { defineComponent, reactive, ref, nextTick } from 'vue'
import { getSamplesById, sendSamplesById } from '/@/api/Samples'
import { useRoute } from 'vue-router'
import { ElNotification } from 'element-plus/es'
import router from '/@/router'

const optionData = reactive({})
const vFormRef = ref()
const formJson = reactive({ widgetList: {}, formConfig: {} })
const formData = reactive({ list: {} })
const id = ref()

const get = async() => {
    // 接样
    await sendSamplesById(id.value)

    ElNotification({
        title: '成功',
        message: '接样成功',
        type: 'success'
    })

    await router.push('/Samples/SamplesList')
}

const Print = () => {
    print()
}


export default defineComponent({
    name: 'CheckTypeFormDetail',
    components: { QrCode },

    setup: function() {
        const samplesDetails = reactive({ id: 0, state: {} })
        const route = useRoute()

        getSamplesById(route.params.id)
            .then(res => {
                let temp = JSON.parse(res.data.data.form)
                formJson.widgetList = temp.widgetList
                formJson.formConfig = temp.formConfig
                vFormRef.value.setFormJson(formJson)
                samplesDetails.id = res.data.data.id
                id.value = samplesDetails.id
                samplesDetails.state = res.data.data.state


                for (let parseKey in JSON.parse(res.data.data.formData)) {
                    formData.list[parseKey] = JSON.parse(res.data.data.formData)[parseKey]
                    nextTick(() => {
                        vFormRef.value.setFieldValue(parseKey, JSON.parse(res.data.data.formData)[parseKey])
                    })
                }
                nextTick(() => {
                    vFormRef.value.disableForm()
                })
            })

        return {
            formJson,
            vFormRef,
            formData,
            optionData,
            get,
            samplesDetails,
            Print
        }
    }
})
</script>

<style>
@media print {
    #app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-navbar.flex.justify-between.items-center.h-12.shadow-sm.overflow-hidden.relative.z-10 {
        display: none;
    }

    #app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-tags.h-8.leading-8.text-sm.text-gray-600.relative {
        display: none;
    }

    #app > div > div.layout-sidebar.flex.flex-col.h-screen.transition-width.duration-200.shadow.w-64 {
        display: none;
    }

    #app > div > div.layout-sidebar-sidesetting.fixed.right-0.top-64.z-10 {
        display: none;
    }

    #\31 \.23452384164\.123412416 {
        display: none;
    }

    /*去掉表格样式,便于打印*/
    tbody tr td input[type=text] {
        height: 100%;
        background: none !important;
        border: none !important;
    }

    /* 去掉必填选项的星号 */
    .el-form-item__label:before {
        display: none;
    }
}

/* 未打印时样式 方便提醒*/
.v tbody tr td input[type=text] {
    height: 100%;
    border-color: red;
}

/*长宽比改为A4纸大小*/
.A4 {
    background-color: #fff;
    padding-bottom: calc(100% * 1.414286 / 1);
}

.v tbody {
    border: 2px solid #333 !important;
}

.v tbody tr td {
    border: 1px solid #333 !important;
}

.v div.sub-form-action-column .el-button {
    font-size: initial;
    padding: 8px;
    background: initial;
    border: initial;
}
</style>
<style scoped>
@media print {
    .btnGroup {
        display: none;
    }
}

</style>
